<template>
    <div id="app">
        <el-container>
            <el-header style="text-align: center">Gin</el-header>
            <el-main id="v-content" v-bind:style="{minHeight: Height + 'px'}">
                <div style="margin-left: 20%; margin-right:20%">
                    <el-divider content-position="center"><span>Bubble List</span></el-divider>
                    <el-card class="box-card">
                        <el-form ref="form" :model="form" label-width="80px">
                            <el-row>
                                <el-col :span=12 :offset=2>
                                    <el-input v-model="form.content" placeholder="请输入代办事项..."></el-input>
                                </el-col>
                                <el-col :span=2 :offset=1>
                                    <el-button type="primary" circle icon="el-icon-circle-plus-outline" @click="addData()"></el-button>
                                </el-col>
                            </el-row>
                        </el-form>
                        <el-table
                            :data="data"
                            style="width:100%">
                            <el-table-column label="#" align="center">
                              <template slot-scope="scope">
                                {{ scope.$index }}
                              </template>
                            </el-table-column>
                          <el-table-column label="待办事项">
                            <template slot-scope="scope">
                              {{ scope.row.todo }}
                            </template>
                          </el-table-column>
                          <el-table-column label="操作">
                            <template slot-scope="scope">
                              <el-button v-if="scope.row.status == 0" @click="change(scope.row, 1)" type="success" circle icon="el-icon-check"></el-button>
                              <el-button v-if="scope.row.status == 1" @click="change(scope.row, 0)" type="primary" circle icon="el-icon-refresh"></el-button>
                              <el-button @click="remove(scope.row)" type="danger" circle icon="el-icon-delete"></el-button>
                            </template>
                          </el-table-column>
                        </el-table>
                    </el-card>
                </div>
            </el-main>
            <el-footer style="text-align: center">just for exercise</el-footer>
    </el-container>
    </div>
</template>
<script>
import { getData, changeStatus, removeData, addData } from '@/api/todo'
import { Message } from 'element-ui'

export default {
  name: 'Index',
  data() {
    return {
      Height: 0,
      form: {
          content: ""
      },
      data: [
      ]
    }
  },
  created() {
    this.getData();
  },
  methods: {
    getData: function() {
      getData().then(response => {
        this.data = response.data
      })
    },
    change: function(row, status) {
      changeStatus({id: row.id, status: status}).then(response => {
          Message.success("修改成功")
          this.getData()
        }
      )
    },
    remove: function(row) {
      removeData({id: row.id}).then(response => {
        Message.success("删除成功")
        this.getData()
      })
    },
    addData: function() {
      addData({"todo": this.form.content}).then(response => {
        Message.success("添加成功")
        this.form.content = ''
        this.getData()
      })
    }
  },
  mounted() {
      this.Height = document.documentElement.clientHeight - 120;
      window.onresize = () => {this.Height = document.documentElement.clientHeight - 120}
  }
}
</script>
<style scoped>
.el-header {
    background-color: #409EFF;
    color: #333;
    line-height: 60px;
}
.el-footer {
    background-color: #B3C0D1;
    line-height: 60px;
}
</style>
